<template>
    <el-card>

       <!-- 新增|刷新 -->
       <ListHeader @create="handleCreate" @refresh="getData"/>
   
       <el-table :data="tableData"  v-loading="loading">
        <el-table-column label="序號">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
         <el-table-column prop="title" label="標題" :show-overflow-tooltip="true" />
        
         <el-table-column label="產品圖">
        <template #default="{ row }">
          
          <el-image style="width: 100px; height: 50px" :src="row.url" hide-on-click-modal
            :preview-src-list="[row.url]" :preview-teleported="true" />
        </template>
      </el-table-column>
      <el-table-column label="狀態">
        <template #default="{ row }">
          <el-switch :modelValue="row.status" :active-value="1" :inactive-value="0" :loading="row.statusLoading"
             @change="handleStatusChange($event, row)">
          </el-switch>
        </template>
      </el-table-column>
        
         <el-table-column prop="created_at" label="創建時間"  />
    
         <el-table-column label="操作" width="180" align="center">
           <template #default="scope">
             
            
               <el-button type="primary" size="small"  @click="handleEdit(scope.row)">修改</el-button>
   
             <el-popconfirm title="是否要删除？" confirmButtonText="确认" cancelButtonText="取消" @confirm="handleDelete(scope.row.id)">
                   <template #reference>
                       <el-button type="danger" size="small">删除</el-button>
                   </template>
               </el-popconfirm>
             
           </template>
         </el-table-column>
         
       </el-table>
   
       <div class="flex items-center justify-center mt-5">
           <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage" :page-size="limit" @current-change="getData"/>
       </div>
   
       <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit" destroyOnClose>
         <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
           <el-form-item label="標題" prop="title">
             <el-input v-model="form.title" placeholder="標題"></el-input>
           </el-form-item>
           <el-form-item label="產品圖" prop="banners">
              <UploadImage  :imgUrl="form.url" @getUrl="getIdCardFrontUrl" :limit="1"></UploadImage>
              
            </el-form-item>
         
         </el-form>
       </FormDrawer>
    </el-card>
   </template>
   
    <script setup>
   import { ref } from "vue"
   import ListHeader from "@/components/ListHeader.vue";
   import FormDrawer from "@/components/FormDrawer.vue";
   import { useInitTable,useInitForm } from '@/composables/useCommon.js'
   import UploadImage from '@/components/UploadImage.vue'
   
   import {
    getbanner,
    createbanner,
    updatebanner,
    delbanner
   } from "@/api/store.js"
 
   const {
     tableData,
     loading,
     currentPage,
     total,
     limit,
     getData,
     handleDelete,
     handleStatusChange
   } = useInitTable({
     getList:getbanner,
     delete:delbanner,
     updateStatus:updatebanner
   })
   
   const {
     formDrawerRef,
     formRef,
     form,
     rules,
     drawerTitle,
     handleSubmit,
     handleCreate,
     handleEdit
   } = useInitForm({
     form:{
         title: "",
         url: "",
         status:1
     },
     getData,
     update:updatebanner,
     create:createbanner
   })
   
   const getIdCardFrontUrl = (url) => {
  form.url = url;
};
   </script>
   
   